<script setup lang="ts">
import {Search} from '@element-plus/icons-vue'
import {reqHospitalInfo} from '@/api/home/index.ts'
import  type {HospitalInfo,} from "@/api/home/type.ts";
import {ref} from "vue";
import {useRouter} from "vue-router";
// 创建路由器对象
const $router = useRouter()
//搜集搜索的关键字
let hosname = ref('')
async function fetchData(keyword:string,cb:any){
  let result:HospitalInfo = await reqHospitalInfo(keyword)
  let showData = result.data.map(item=>{
    return {
      hoscode:item.hoscode,
      value:item.hosname
    }
  })
  cb(showData)
  // console.log(result)
}
// 点击某一个推荐项进行路由跳转并携带参数
function goDetail(item:any){
  $router.push({
    path:'/hospital/register',
    query:{
      hoscode:item.hoscode
    }
  })
  // console.log(item)
}
</script>

<template>
<div class="search">
  <el-autocomplete
      v-model="hosname"
      :fetch-suggestions="fetchData"
      :trigger-on-focus="false"
      clearable
      class="inline-input"
      placeholder="请输入搜索内容"
      @select="goDetail"
  />
  <el-button type="primary" :icon="Search"></el-button>
</div>
</template>

<style scoped lang="scss">
.search{
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  ::v-deep(.el-input__wrapper){
    width: 600px;
    margin-right: 10px;
  }
}
</style>